<template>
    <el-container>
        <el-header>
            <el-button type="primary" size="mini" @click="mysql.dialog = true">新建连接</el-button>
        </el-header>

        <el-main style="display: flex;padding: 1px !important;">
            <el-tree style="margin-right: 10px;" :data="connectionList" :props="defaultProps" @node-click="handleNodeClick">
            </el-tree>
            <el-table :data="tableData">
                <el-table-column prop="date" label="日期" width="140">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="120">
                </el-table-column>
                <el-table-column prop="address" label="地址">
                </el-table-column>
            </el-table>
        </el-main>


        <el-dialog
                title="连接数据库"
                v-model="mysql.dialog"
                width="30%"
                center>
            <el-form ref="connectionForm" :rules="connectionFormRules" :model="mysql.connectForm" label-width="100px">
                <el-form-item label="连接名称" prop="connectionName">
                    <el-input v-model="mysql.connectForm.connectionName" ></el-input>
                </el-form-item>
                <el-form-item label="host" prop="host">
                    <el-input v-model="mysql.connectForm.host"></el-input>
                </el-form-item>
                <el-form-item label="port" prop="port" >
                    <el-input v-model="mysql.connectForm.port" type="number"></el-input>
                </el-form-item>
                <el-form-item label="username" prop="username">
                    <el-input v-model="mysql.connectForm.username"></el-input>
                </el-form-item>
                <el-form-item label="password" prop="password">
                    <el-input v-model="mysql.connectForm.password"></el-input>
                </el-form-item>
            </el-form>

            <template #footer>
                <span class="dialog-footer">
                  <el-button @click="mysql.dialog = false">取 消</el-button>
                  <el-button type="primary" @click="newConnection('connectionForm')">连 接</el-button>
                </span>
            </template>

        </el-dialog>
    </el-container>
</template>

<script>
    import {connectionMysql} from "@/api/localhost/connection.js"
    import { isEmpty } from "@/global/StrUtil.js"
    import { localStorageConstant,storeConnection,isExistsConnection,getConnectionMap} from "@/global/localStorageKeys.js";

    export default {
        name: "",
        mounted() {

        },
        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return {
                tableData: Array(20).fill(item),
                mysql:{
                    dialog:true,
                    connectForm:{}
                },
                connectionFormRules:{
                    host:[
                        { required: true, message: 'host is required', trigger: 'change' }
                    ],
                    port:[
                        { required: true, message: 'port is required', trigger: 'change' }
                    ],
                    username:[
                        { required: true, message: 'username is required', trigger: 'change' }
                    ]
                },
                connectionList:[
                    {
                        label:"ahahaha "
                    },{
                        label:"哈哈哈哈"
                    }
                ]
            }
        },
        methods:{
            newConnection(connectForm) {
                var connectionName = this.mysql.connectForm.connectionName

                this.$refs[connectForm].validate((valid) => {
                    if (valid) {
                        // if ( isEmpty(connectionName) ){
                        //     connectionName = this.getConnectionName("本地")
                        // }else{
                        //     connectionName = this.getConnectionName(connectionName.trim())
                        // }

                        this.storeConnection(connectionName)
                        console.log("存储完成")
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });


                // connectionMysql(params).then(res => {
                //     console.log("连接mysql")
                //     console.log(res)
                // }).catch( res => {
                //     console.log(res)
                // }).finally( res => {
                //     that.createConnectionName(params.connectionName)
                // })

            },
            storeConnection(connectionName){
                var object = {
                    connectionName:connectionName,
                    host:this.mysql.connectForm.host,
                    port:this.mysql.connectForm.port,
                    username:this.mysql.connectForm.username,
                    password:this.mysql.connectForm.passes
                }

                console.log("存储连接")
                storeConnection(connectionName,object)
            },
            getConnectionName(connectionName){
                for (var i = 1; i < 1000; i++){
                    var temp = connectionName + i;
                    if ( !isExistsConnection()){
                        return temp
                    }
                }
            },
            refreshConnections(){
                this.connectionList = []
                var map = getConnectionMap
                for (let key of map.keys()) {
                    var obj = {
                        label:key
                    }
                    this.connectionList.push(obj)
                }
            }
        }

    }
</script>
<style>
    .el-main{
        padding: 1px !important;
    }
</style>
<style scoped>

    .el-main .el-tree{
        /*flex: 1;*/
    }
</style>